<template>
  <div>
    <el-form ref="form" label-width="80px">
      <el-form-item label="SPU名称">
        <span>{{ spuName }}</span>
      </el-form-item>
      <el-form-item label="SKU名称">
        <el-input
          placeholder="sku名称"
          v-model="skuAttrList.skuName"
        ></el-input>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input v-model="skuAttrList.price"></el-input>
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input
          placeholder="重量(千克)"
          v-model="skuAttrList.weight"
        ></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input
          type="textarea"
          :rows="4"
          v-model="skuAttrList.skuDesc"
        ></el-input>
      </el-form-item>
      <el-form-item label="平台属性" class="saleAttr">
        <el-form-item
          :label="attrInfo.attrName"
          v-for="(attrInfo, index) in attrInfoList"
          :key="attrInfo.id"
        >
          <el-select
            placeholder="请选择"
            v-model="skuAttrValueList[index].valueId"
          >
            <el-option
              :label="attrValue.valueName"
              :value="attrValue.id"
              v-for="attrValue in attrInfo.attrValueList"
              :key="attrValue.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-form-item label="销售属性" class="saleAttr">
        <el-form-item
          :label="saleAttr.saleAttrName"
          v-for="(saleAttr, index) in saleAttrList"
          :key="saleAttr.id"
        >
          <el-select
            placeholder="请选择"
            v-model="skuSaleAttrValuelist[index].saleAttrValueId"
          >
            <el-option
              :label="saleAttrValue.saleAttrValueName"
              :value="saleAttrValue.id"
              v-for="saleAttrValue in saleAttr.spuSaleAttrValueList"
              :key="saleAttrValue.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-form-item label="图片列表">
        <el-table
          :data="spuImageList"
          ref="multipleTable"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          border
        >
          <el-table-column type="selection" width="80" align="center">
          </el-table-column>
          <el-table-column label="图片" prop="imgUrl">
            <template slot-scope="{ row }">
              <img :src="row.imgUrl" alt="" width="100px" />
            </template>
          </el-table-column>
          <el-table-column prop="imgName" label="名称"> </el-table-column>
          <el-table-column prop="prop" label="操作">
            <template slot-scope="{ row }">
              <el-button
                type="primary"
                @click="changeIsDefault(row)"
                v-show="row.isDefault === 0"
                >设为默认</el-button
              >
              <el-button v-show="row.isDefault === 1">默认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveSku">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "AddSku",
  data() {
    return {
      // 销售属性列表
      saleAttrList: [],
      // 图片列表
      spuImageList: [],
      // spu数据列表
      attrInfoList: [],
      // spu名称
      spuName: "",
      // 要发送给服务端的数据
      skuAttrList: {
        // 三级分类id
        category3Id: "",
        // 价格
        price: 0,
        // 选择的平台属性
        skuAttrValueList: [],
        // 默认图片
        skuDefaultImg: "",
        // 描述
        skuDesc: "",
        // 选择的图片列表
        skuImageList: [],
        // sku名称
        skuName: "",
        // 选择的销售属性
        skuSaleAttrValuelist: [],
        // spuId
        spuId: "",
        // 品牌id
        tmId: "",
        // 重量
        weight: "",
      },
      // 平台属性列表
      skuAttrValueList: [],
      // 销售属性列表
      skuSaleAttrValuelist: [],
    };
  },
  methods: {
    // 获取销售属性数据
    async getSaleAttrList(id, spuName) {
      const result = await this.$API.spu.reqAttrList(id);
      if (result.code === 200) {
        this.saleAttrList = result.data;
        this.saleAttrList.forEach((item) => {
          this.skuSaleAttrValuelist.push({
            saleAttrId: item.id,
            saleAttrValueId: "",
          });
        });
      }
      this.spuName = spuName;
    },
    // 获取图片数据
    async getSpuImageList(id) {
      const result = await this.$API.spu.reqSpuImageList(id);
      if (result.code === 200) {
        this.spuImageList = result.data;
        this.spuImageList.forEach((item) => {
          this.$set(item, "isDefault", 0);
        });
      }
    },
    // 获取spu数据
    async getAttrInfoList(id, tmId, category3Id) {
      // 获取父组件传过来的spuId, tmId, category3Id
      this.skuAttrList.spuId = id;
      this.skuAttrList.tmId = tmId;
      this.skuAttrList.category3Id = category3Id;
      // 发送请求
      const result = await this.$API.spu.reqAttrInfoList(id, tmId, category3Id);
      if (result.code === 200) {
        this.attrInfoList = result.data;
        this.attrInfoList.forEach((item) => {
          this.skuAttrValueList.push({
            attrId: item.id,
            valueId: "",
          });
        });
      }
    },
    // 排他思想，只能存在一个默认的图片
    changeIsDefault(row) {
      this.spuImageList.forEach((item) => (item.isDefault = 0));
      row.isDefault = 1;
      this.skuAttrList.skuDefaultImg = row.imgUrl;
    },
    // 选择出来的照片
    handleSelectionChange(list) {
      this.skuAttrList.skuImageList = list;
      this.skuAttrList.skuImageList.forEach((item) =>
        this.$set(item, "spuImgId", item.id)
      );
    },
    // 保存sku
    async saveSku() {
      const { price, skuDesc, weight, skuName } = this.skuAttrList;
      if (!price || !skuDesc || !weight || !skuName) {
        this.$message({
          message: "sku名称、价格、重量、描述不能为空！",
          type: "warning",
        });
        return;
      }
      // 整合数据
      // 去除掉平台属性中值为空的项
      this.skuAttrList.skuAttrValueList = this.skuAttrValueList.filter(
        (item) => item.valueId !== ""
      );
      // 去掉销售属性中值为空的项
      this.skuAttrList.skuSaleAttrValuelist = this.skuSaleAttrValuelist.filter(
        (item) => item.saleAttrValueId !== ""
      );
      // 发送请求
      try {
        await this.$API.spu.reqSaveSkuInfo(this.skuAttrList);
        this.$message({
          message: "保存成功",
          type: "success",
        });
        // 调用自定义事件，回到战术spu列表的卡片页
        this.$emit("updataShowCard", 1, 1);
        // 同时将data的数据重置成初始状态
        Object.assign(this.$data, this.$options.data());
      } catch (error) {
        this.$message({
          message: "保存失败",
          type: "error",
        });
      }
    },
    // 取消添加sku
    cancel() {
      // 自定义事件，隐藏增加sku的卡片，展示spu列表的卡片
      this.$emit("updataShowCard");
      // 同时将data的数据重置成初始状态
      Object.assign(this.$data, this.$options.data());
    },
  },
};
</script>

<style>
.saleAttr .el-form-item {
  display: inline-block !important;
  margin-bottom: 10px;
}
</style>